<template>
  <div class="text-white font-size-10 font-style-normal font-weight-400 line-height-125">
    <i18n-t keypath="dialog.discount.remark.lineThrough" tag="span" class="line-through mr-1">
      <template #highlight2>
        <span class="text-primary font-weight-500">{{ $t('dialog.discount.remark.highlight2', { amount }) }}</span>
      </template>
    </i18n-t>
    <i18n-t keypath="dialog.discount.remark.text" tag="span" class="">
      <template #highlight1>
        <span class="text-primary font-weight-500 upgrade" @click="$emit('click')">
          {{ $t('dialog.discount.remark.highlight1') }}
        </span>
      </template>
    </i18n-t>
  </div>
</template>
<script setup>
defineProps({
  amount: {
    type: [Number, String],
    required: true,
  },
})

defineEmits(['click'])
</script>
<style scoped lang="scss">
.upgrade {
  cursor: pointer;
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}
</style>
